<script setup>
import { reactive,toRefs,ref,onBeforeMount, onMounted } from 'vue';
import { addClusterHandler as addHandler,updateClusterHandler as updateHandler } from '../../api/cluster.js' 
import { ElMessage } from 'element-plus'

const data = reactive({
    itemForm:{
        id: "",
        displayName: "",
        city: "",
        district: "",
        kubeconfig: ""
        
    }
})
const props = defineProps({
    method: {
        type: String,
        default: "Create"
    },
    itemForm: {
        type: Object
    }
})
const emits = defineEmits(["rollback"])
const itemFormRef = ref()
const {itemForm} = toRefs(data)
const clear=()=>{
    itemFormRef.value.resetFields()
}
const rules = reactive({
  id: [
    { required: true, message: '请输入集群ID', trigger: 'blur' },
  ],
  displayName: [
    { required: true, message: '请输入集群名', trigger: 'blur' },
  ],
  city: [
    { required: true, message: '请输入城市位置', trigger: 'blur' },
  ],
  kubeconfig: [
    { required: true, message: '请输入kubeconfig', trigger: 'blur' },
  ],
})
const submit=()=>{
    itemFormRef.value.validate((valid)=>{
        if(valid){

            if (props.method == "Create"){
                addHandler(data.itemForm).then((response)=>{
                    ElMessage({
                        message: response.data.message,
                        type: 'success',
                    })
                    // emits('rollback')
                })
            } else{
                updateHandler(data.itemForm).then((response)=>{
                    ElMessage({
                        message: response.data.message,
                        type: 'success',
                    })
                    emits('rollback')
                })
            }
        }else{
            ElMessage({
                    message: "请安要求输入",
                    type: 'warning',
                })
        }
    })
}
onMounted(()=>{
    // data.itemForm=props.itemForm
    // const jsonString = JSON.stringify(props.itemForm)
    // data.itemForm = JSON.parse(jsonString)
    data.itemForm = JSON.parse(JSON.stringify(props.itemForm))
})
</script>

<template>

    <el-form label-width="140px"  :rules="rules" ref="itemFormRef" :model="itemForm">
    <div class="cluster-info">
    <div>
        <el-form-item class="form-item" prop="id" label="集群id" required >
         <el-input placeholder="请输入集群ID" v-model="itemForm.id" autocomplete="off" :disabled="props.method=='Edit'" />
        </el-form-item>
        <el-form-item class="form-item" prop="displayName" label="集群名称" required>
            <el-input  placeholder="请输入集群名称" v-model="itemForm.displayName" autocomplete="off" />
        </el-form-item>
        <el-form-item class="form-item" label="位置">
            <el-col :span="10">
                <el-form-item  prop="city">
                    <el-input placeholder="城市" v-model="itemForm.city" autocomplete="off" />
                </el-form-item>
            </el-col>
            <el-col :span="2" >-</el-col>
            <el-col :span="10">
                <el-form-item  prop="district">
                    <el-input placeholder="区" v-model="itemForm.district" autocomplete="off" />
                </el-form-item>
            </el-col>
        </el-form-item>
    </div>
    <div>
        <el-form-item class="form-item" prop="kubeconfig"  style="width:400px;" label-width="40px">
            <el-input type="textarea" :rows="10" v-model="itemForm.kubeconfig" autocomplete="off" />
        </el-form-item>
        <span style="display: block; margin-top:20px;" class="span-button">
            <el-button @click="clear()">清空</el-button>
            <el-button @click="submit()" type="primary">
            {{ props.method=="Create"?"添加":"更新" }}
            </el-button>
        </span>
    </div>

</div>
    </el-form>
</template>

<style scoped>
.form-item{
    width: 400px;
    margin: 20px auto;
}
.cluster-info {
    display: flex;
    flex-direction: row;
}
</style>